import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'

export default class LgTimeline extends Component {
    state = {
        dataList: []
    }

    componentDidMount() { }

    componentDidShow() { }

    componentDidHide() { }

    componentDidCatchError() { }

    render() {
        var props = this.props;
        return (
            <View className="lg_timeline" style={props.style || {}} >
                {
                    props.type == 1 ?//type：1是A款
                        <View className="lg_timeline_1">
                            {
                                this.props.dataList.map((o, i) => {
                                    return (
                                        <Timeline1 data={o} index={i} key={"timeline" + i} />
                                    )
                                })
                            }
                        </View> :
                        <View className="lg_timeline_2">
                            <Timeline2 dataList={this.props.dataList} getSend={this.props.getSend} />
                        </View>
                }
            </View>
        )
    }
}

class Timeline1 extends Component {
    render() {
        var data = this.props.data
        return (
            <View className="">
                <View className="lg_time_content" style={`margin-bottom:20px`}>
                    <View className="time_line"></View>
                    <View className="lg_time clear">
                        <View className="time_point_big left"></View>
                        <View className="time_name left">{data.time}</View>
                    </View>
                    {
                        data.data.map((o, i) => {
                            return (
                                <View className="detail_list" key={"detail" + i}>
                                    <View className="lg_datetime clear">
                                        <View className="datetime_left left">{o.datatime.substr(11, 8)}</View>
                                        <View className="datetime_point left"></View>
                                        <View className="datetime_userName left">{o.userName}</View>
                                    </View>
                                    <View className="detail_content oneline">{o.content}</View>
                                </View>
                            )
                        })
                    }
                </View>
            </View>
        )
    }
}
class Timeline2 extends Component {
    constructor() {
        super(...arguments)
        this.changeShow = this.changeShow.bind(this)
        this.getSend = this.getSend.bind(this)
    }
    state = {
        isShow: true
    }
    changeShow() {
        //console.log(this.state.isShow)
        this.setState({
            isShow: !this.state.isShow
        })
    }
    getSend(){
        this.props.getSend()
    }
    render() {
        var data = this.props.dataList
        var that = this
        //console.log(this.props.getSend)
        //console.log(data)
        return (
            <View className="lg_timeline2_content">
                <View className="head_tip">流程</View>
                <View style={{ position: "relative", marginTop: "10px" }}>
                    <View className="left_line"></View>
                    {
                        data.map((o, index) => {
                            var headImg = o.headImg ? "url(" + o.headImg + ")" : ""
                            var count = 0
                            for (var i in o.list) {
                                if (o.list[i].isRead) {
                                    count++
                                }
                            }
                            return (
                                <View className="timeline_list2 clear" key={"timeline2" + index}>
                                    <View className="clear">
                                        <View className="user_img left" style={{ backgroundImage: headImg,display:o.list?"none":"" }}>
                                            <View>
                                                <View className="flow_icon1" style={{ display: o.flag == 1 ? "" : "none",backgroundSize:"100% 100%" }}></View>
                                                <View className="flow_icon2" style={{ display: o.flag == 1 ? "none" : "",backgroundSize:"100% 100%" }}></View>
                                            </View>
                                        </View>
                                        <View className="user_img1 left" style={{display:o.list?"":"none"}}></View>
                                        <View className="right_content left">
                                            <View className="right_time">{o.time}</View>
                                            <View className="right_title">{o.title}</View>
                                            <View className="right_bottom_name clear">
                                                <View className='left'>
                                                    <View className="left">{o.name}</View>
                                                    <View className="left">{o.identity}</View>
                                                    <View className="left" style={{ display: o.userId ? "" : "none", marginLeft: "5px" }}>({o.userId + " | " + o.className})</View>
                                                </View>
                                                <View className="left" style={{ display: o.flag ? "" : "none", color: o.flag == 2 ? "#009900" : o.flag == 3 ? "#ff0000" : "#0099ff", marginLeft: "5px" }}>
                                                    {o.flag == 2 ? "已同意" : o.flag == 3 ? "已拒绝" : "审批中"}
                                                </View>
                                            </View>
                                            <View className="right_reason" title={o.reason} style={{ display: o.reason ? "" : "none", background: o.flag == 2 ? "#dcf3dc" : "#fff0ed", color: o.flag == 2 ? "#009900" : "#ff0000" }}>
                                                {o.reason}
                                            </View>
                                            <View className="send_count clear" style={{ display: o.list ? "" : "none" }}>
                                                <View className="left">抄送{o.list ? o.list.length : 0}人</View>
                                                <View className="left" style={{ color: "rgb(58,81,180)", marginLeft: "5px" }}>{count}人已读</View>
                                                <View className="change_show" onClick={that.changeShow} style={{ display: that.state.isShow ? "none" : "",backgroundSize:"100% 100%" }}></View>
                                                <View className="no_show" onClick={that.changeShow} style={{ display: that.state.isShow ? "" : "none",backgroundSize:"100% 100%" }}></View>
                                            </View>
                                            <View className="clear" style={{ display: that.state.isShow ? "" : "none" }}>
                                                {
                                                    o.list ? o.list.map((data, index) => {
                                                        var headImg1 = data.headImg ? "url(" + data.headImg + ")" : ""
                                                        return (
                                                            <View key={"send" + index} className="left" style={{ marginTop: "10px" }}>
                                                                <View className="send_list left">
                                                                    <View className="send_img" style={{ backgroundImage: headImg1 }}>
                                                                        <View className="send_check" style={{ display: data.isRead ? "" : "none",backgroundSize:"100% 100%" }}></View>
                                                                    </View>
                                                                    <View className="send_name">{data.name}</View>
                                                                </View>
                                                                <View className="add_btn left" style={{display:((index+1)==o.list.length)&&!that.props.getSend?"none":""}}></View>
                                                            </View>
                                                        )
                                                    }) : null
                                                }
                                                <View className="add_send_person left" style={{display:that.props.getSend&&o.list?"":"none"}} onClick={this.getSend}></View>
                                            </View>
                                        </View>
                                    </View>
                                    <View className="time_line2"></View>
                                    <View className="send_line2" style={{ display: o.list ? "" : "none" }}></View>
                                </View>
                            )
                        })
                    }
                </View>
            </View>
        )
    }
}